<template>
  <div class="statistic">
    <div class="left">
      <div class="header">实训作物</div>
      <el-tree
        v-loading="listLoading"
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="id"
        :props="defaultProps"
        @check="checkChange"
      />
    </div>
    <div class="right">
      <div class="rightHeader">
        <div class="headerLeft">统计分析</div>
        <el-button type="primary" size="small" icon="el-icon-arrow-left" @click="goback">返回</el-button>
      </div>
      <div class="btn">
        <div v-for="(item,index) in propertyDatas" :key="index" class="el-btn">
          <el-button :type="item==defaultProperty?'primary':''" @click="changeProperty(item)">{{ item }}</el-button>
        </div>
      </div>
      <div v-loading="listLoading">
        <chart ref="mychild" height="500px" width="100%" :transfer-data="transferData" />
      </div>
    </div>
  </div>
</template>

<script>
import { statistic } from '@/api/dataReport'
import Chart from '@/components/Charts/LineMarker'
export default {
  name: 'Statistic',
  components: { Chart },
  data() {
    return {
      allData: [],
      data: [],
      id: [],
      ids: [],
      transferData: [],
      studentDatas: [],
      propertyDatas: [],
      defaultProperty: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      listLoading: true
    }
  },
  created() {
    console.log(this.$route.params.ids)
    statistic(this.$route.params.ids).then(res => {
      this.allData = res.data
      console.log(this.allData)
      for (let i = 0; i < this.allData.length; i++) {
        this.data.push({
          label: this.allData[i].cropName,
          id: `idi${i}`,
          children: []
        })
        const grades = this.allData[i].gradeDataReports
        for (let j = 0; j < grades.length; j++) {
          this.data[i].children.push({
            label: grades[j].gradeName,
            id: `idj${j}`,
            children: []
          })
          const classes = grades[j].classDataReports
          for (let z = 0; z < classes.length; z++) {
            this.data[i].children[j].children.push({
              label: classes[z].className,
              id: `idz${z}`,
              children: []
            })
            const students = classes[z].studentDataReports
            for (let m = 0; m < students.length; m++) {
              this.data[i].children[j].children[z].children.push({
                label: students[m].studentName,
                id: m + z + j + i
              })
              this.id.push(m)
              this.studentDatas.push(students[m])
              console.log(this.studentDatas)
            }
          }
        }
      }
      // console.log(this.data);
      // console.log(this.studentDatas);
      for (let i = 0; i < this.studentDatas.length; i++) {
        this.studentDatas[i].cropDataList.forEach(item => this.propertyDatas.push(item.cropProperty))
      }
      this.propertyDatas = [...new Set(this.propertyDatas)]
      this.defaultProperty = this.propertyDatas[0]
      // console.log(this.propertyDatas);
      // this.filterStudents([0]);
      // this.filterProperty(this.defaultProperty);
      this.listLoading = false
    })
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    checkChange(data, node) {
      console.log(node)
      this.ids = node.checkedKeys.filter(item => typeof item !== 'string')
      console.log(this.ids)
      this.filterStudents(this.ids)
    },
    filterStudents(ids) {
      this.transferData = []
      for (let i = 0; i < ids.length; i++) {
        this.transferData.push(this.studentDatas[ids[i]]) // 此时已经拿到选中同学的所有数据，之后需要去过滤属性
      }
      console.log(this.transferData)
      this.filterProperty(this.defaultProperty)
    },
    filterProperty(property) {
      const Data = this.deepClone(this.transferData)
      for (let i = 0; i < this.transferData.length; i++) {
        const data = []
        for (let j = 0; j < this.transferData[i].cropDataList.length; j++) {
          if (this.transferData[i].cropDataList[j].cropProperty == property) {
            data.push(this.transferData[i].cropDataList[j])
          }
        }
        // this.Data[i].cropDataList = data;
        Data[i].cropDataList = data
      }
      this.$refs['mychild'].updateData(Data)
      console.log(this.transferData)
      console.log(Data)
    },
    deepClone(target) {
      // 定义一个变量
      let result
      // 如果当前需要深拷贝的是一个对象的话
      if (typeof target === 'object') {
      // 如果是一个数组的话
        if (Array.isArray(target)) {
          result = [] // 将result赋值为一个数组，并且执行遍历
          for (const i in target) {
            // 递归克隆数组中的每一项
            result.push(this.deepClone(target[i]))
          }
          // 判断如果当前的值是null的话；直接赋值为null
        } else if (target === null) {
          result = null
          // 判断如果当前的值是一个RegExp对象的话，直接赋值
        } else if (target.constructor === RegExp) {
          result = target
        } else {
          // 否则是普通对象，直接for in循环，递归赋值对象的所有值
          result = {}
          for (const i in target) {
            result[i] = this.deepClone(target[i])
          }
        }
      // 如果不是对象的话，就是基本数据类型，那么直接赋值
      } else {
        result = target
      }
      // 返回最终结果
      return result
    },
    changeProperty(item) {
      this.defaultProperty = item
      console.log(this.defaultProperty)
      this.filterStudents(this.ids)
      // this.filterProperty(item);
    }
  }
}
</script>

<style scoped>
.statistic{
    width: 100%;
    display: flex;
}
.left{
    width: 20%;
}
.right{
    width: 80%;
    border-left: 1px solid #CCCCCC;
    padding-left: 2%;
    height: 500px;
}
.header{
    text-align: center;
    background: #f2f2f2;
    font-size: 16px;
    height: 45px;
    line-height: 45px;
}
.rightHeader{
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    height: 45px;
    align-items: center;
    border-bottom: 1px solid #EEEEEE;

}
.btn{
  display: flex;
  margin-top: 1%;
}
.el-btn{
  margin-right: 2%;
}
</style>

